<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fullpage</title>
    <style>
        .section{
            color: #fff;
            font-size: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
       
        @keyframes left
        {
            from {opacity: 0;transform: translateX(-300px)}
            to {opacity: 1;transform: translateY(0px)}
        }
        @keyframes top
        {
            from {opacity: 0;transform: translateY(300px)}
            to {opacity: 1;transform: translateY(0px)}
        }
    </style>
</head>
<body>
    <div id="fullpage">
        <div class="sections">
            <div class="section"><span>第一屏</span></div>
            <div class="section"><span>第二屏</span></div>
            <div class="section"><span>第三屏</span></div>
            <div class="section"><span>第四屏</span></div>
        </div>
    </div>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="myfullpage.js"></script>
<script>
    $("#fullpage").fullpage({
        "scrollingSpeed":.5,
        "nowPage":4,
        "animateType":"ease-in-out",
        "keyboardScrolling":false,
        "setPageColor":true,
        "navigation":true,
        "navigationPosition":"left",
        "loopScroll":true
    },beforeMove,afterMove)
    function beforeMove(nowPage){
        //alert(nowPage)
       
    }
    function afterMove(nowPage){
        //alert(nowPage)
        if(nowPage == 1){
            $(".section:first-child span").css({"animation": "left 1s ease"})
        }
        if(nowPage == 2){
            $(`.section:nth-child(${nowPage}) span`).css({"animation": "top 1s ease"})
        }
    }
</script>